<template>
 <div id="order">
 <van-nav-bar
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
/>
    <h3>下单</h3>
    <van-address-list
    v-model="chosenAddressId"
    :list="list"
    add-button-text="去付款"
    @add="onAdd"
    @edit="onEdit"
    />
    <!-- 商品合计，运费， -->
    <van-cell-group>
        <van-cell title="运费" :value="freightstr" />
        <van-cell title="商品合计" :value="totalstr" />
    </van-cell-group>
 </div>
</template>
<script>
import { Toast } from 'vant';
import axios from 'axios'
 export default {
     data(){
         return {
            countPrice:0,
            checkedNum:0,
            total:0,
            freight:10,
            chosenAddressId: '1',
            totalstr:'',
            freightstr:'',
            list: [
                {
                id: '1',
                name: '张三',
                tel: '13000000000',
                address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
                isDefault: true,
                },
            ]

         }
     },
     created(){
         this.getCount()
         this.freight=this.freight*this.checkedNum
         this.total=this.countPrice+this.freight   
         this.freightstr='￥'+this.freight
         this.totalstr='￥'+this.total
         //console.log(this.total)
     },
     watch:{
         '$route':'getCount'
     },
     methods:{
        onClickLeft(){
        this.$router.go(-1)
        },
        onAdd() {
            Toast('付款 Ing...');
        },
        onEdit(item, index) {
            Toast('编辑地址:' + index);
        },
        getCount(){
            var count=this.$route.query.countParams
            var Num=this.$route.query.checkedGoodsNum
            this.countPrice=count
            this.checkedNum=Num
        }
     }
 }
 </script>
<style lang="less">
#order{
    .van-nav-bar{
        border-bottom: 1px solid #EADACB;
    }
    .van-address-list{
        margin-top: 10px;
    }
    .van-cell__title{
            text-align: left;
            span{
                margin-left: 20px;
            }
        }
}
</style>